<template>
  <el-form
    ref="ruleForm"
    :model="ruleForm"
    :rules="rules"
    label-position="left"
    class="main-from"
  >
    <p class="describe">
      <span class="text">●</span>
      申请人自述是招生评估非常重要的参考内容，也是充分展现您个人优势、工作成就等方面的最好机会。请认真准备这部分内容，着重介绍您的职场发展经历，不要将它写成公司介绍或是学术论文。
    </p>
    <p class="describe">
      <span class="text">●</span>
      请直接下方空白框中填写自述。每个问题的自述不少于200字。
    </p>
    <p class="describe">
      <span class="black">建议：您可以先在 Word 中填写个人自述</span
      >，再粘贴到下面的填写框中。为避免操作时间过长信息丢失，
      <span class="black">每填写完一个问题请务必点击保存！</span>
    </p>
    <el-form-item class="maxwidth" label="" prop="introduction">
      <p class="describe">
        <span class="text">1.</span>
        请您描述一下自我，包括工作描述、职业发展自我规划、自我评价和兴趣爱好等。
        <b class="red">*</b>
      </p>
      <el-input
        v-model="ruleForm.introduction"
        :rows="4"
        type="textarea"
        placeholder=""
      />
    </el-form-item>
    <el-form-item class="maxwidth" label="" prop="advantage">
      <p class="describe">
        <span class="text">2.</span>
        您最突出的优势和最重要的成就是什么？请举例一个最能展示您的领导才能的事例。
        <b class="red">*</b>
      </p>
      <el-input
        v-model="ruleForm.advantage"
        :rows="4"
        type="textarea"
        placeholder=""
      />
    </el-form-item>
    <el-form-item class="maxwidth" label="" prop="experienced">
      <p class="describe">
        <span class="text">3.</span>
        请描述您最近三年在工作中遇到的一次困难或挫折。其结果如何？
        <span class="label">
          您从中得到了怎样的经验教训？
          <b class="red">*</b>
        </span>
      </p>
      <el-input
        v-model="ruleForm.experienced"
        :rows="4"
        type="textarea"
        placeholder=""
      />
    </el-form-item>
    <el-form-item class="maxwidth" label="" prop="knowledge">
      <p class="describe">
        <span class="text">4.</span>
        您为什么希望学习FMBA课程？您期望通过FMBA课程的学习达到什么总体目标？
        <span class="label">
          您期望获得哪些具体的知识和技能？
          <b class="red">*</b>
        </span>
      </p>
      <el-input
        v-model="ruleForm.knowledge"
        :rows="4"
        type="textarea"
        placeholder=""
      />
    </el-form-item>
    <el-form-item class="maxwidth" label="" prop="qualification">
      <p class="describe">
        <span class="text">5.</span>
        （可选）您是否需要补充其它信息以帮助招生委员会评估您的申请资格？
      </p>
      <el-input
        v-model="ruleForm.qualification"
        :rows="4"
        type="textarea"
        placeholder=""
      />
    </el-form-item>
    <div class="footer-but">
      <el-button type="primary" @click="saveForm('ruleForm')">保存</el-button>
      <el-button type="info" @click="resetForm('ruleForm')">重置</el-button>
    </div>
  </el-form>
</template>

<script>
import rules from "@/util/rules.js";
export default {
  name: "readme",
  props: {},
  data() {
    return {
      ruleForm: {
        introduction: "",
        advantage: "",
        experienced: "",
        knowledge: "",
        qualification: "",
      },
      rules: rules,
    };
  },
  methods: {
    saveForm(formName) {
      console.log("保存");
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      (this.ruleForm = {}), this.$refs[formName].resetFields();
    },
  },
  components: {},
};
</script>

<style scoped lang="scss">
.main-from {
  .flex {
    display: flex;
  }
  .describe {
    position: relative;
    padding-left: 10px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #5a5a5a;
    line-height: 30px;
    margin-bottom: 20px;
    .text {
      position: absolute;
      left: -10px;
      margin-left: 5px;
    }
    .black {
      color: #0b0b0b;
      font-family: MicrosoftYaHei-Bold;
      font-weight: bold;
    }
    .label {
      display: block;
    }
  }

  .footer-but {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    ::v-deep .el-button {
      width: 250px;
      height: 55px;
      margin: 30px 22.5px;
    }
  }
}
@media (max-width: 768px) {
  .main-from {
    .describe,
    .label {
      font-size: 14px;
    }
    .footer-but {
      ::v-deep .el-button {
        width: 125px;
        height: 40px;
        margin: 31px 22.5px;
        font-size: 16px;
      }
    }
  }
}
</style>
